{extend name="common/layout" /}
{block name="main"}
<div class="el-breadcrumb">
  <el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item>设置</el-breadcrumb-item>
    <el-breadcrumb-item>菜单管理</el-breadcrumb-item>
  </el-breadcrumb>
</div>

<el-button type="primary" @click="handleAdd" icon="el-icon-plus">添加</el-button>
<div style="margin-top: 15px;">
  <el-table :data="tableData" style="width: 100%;margin-bottom: 20px;" row-key="id" border
    :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
    <el-table-column prop="sort" label="序号" width="180">
    </el-table-column>
    <el-table-column prop="name" label="姓名" width="180">
    </el-table-column>
    <el-table-column prop="icon" label="图标" width="180">
    </el-table-column>
    <el-table-column prop="controller" label="路由" width="180">
    </el-table-column>
    <el-table-column label="操作" key="slot">
      <template #default="scope">
        <el-button size="mini" type="info" @click="handleEdit(scope.row)" icon="el-icon-edit">编辑</el-button>
        <el-button size="mini" type="danger" @click="handleDelete(scope.row)" icon="el-icon-delete">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</div>

<el-dialog :title="titleContent" v-model="dialogFormVisible">
  <el-form :model="formData" :rules="rules" ref="formData">
    <el-form-item label="序号" :label-width="formLabelWidth" prop="sort">
      <el-input v-model="formData.sort" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="上级菜单" :label-width="formLabelWidth" prop="pid">
      <el-select v-model="formData.pid" placeholder="请选择">
        <template v-for="item in menu" :key="item.id">
          <el-option :label="item.name" :value="item.id" v-if="item.id!==formData.id">
          </el-option>
        </template>
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="名称" :label-width="formLabelWidth" prop="name">
      <el-input v-model="formData.name" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="图标" :label-width="formLabelWidth" prop="icon">
      <el-input v-model="formData.icon" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="路由" :label-width="formLabelWidth" prop="controller">
      <el-input v-model="formData.controller" autocomplete="off"></el-input>
    </el-form-item>
  </el-form>
  <template #footer>
    <span class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="handleSave()">确 定</el-button>
    </span>
  </template>
</el-dialog>
{/block}

{block name="script"}
<script>
  const data = {
    tableData: [],
    menu: [],
    dialogFormVisible: false,
    formLabelWidth: '120px',
    titleContent: '',
    formData: {},
    rules: {
      sort: [{ required: true, message: '请输入', trigger: 'blur' }],
      pid: [{ required: true, message: '请选择', trigger: 'change' }],
      name: [{ required: true, message: '请输入', trigger: 'blur' }],
      controller: [{ required: true, message: '请输入', trigger: 'blur' }]
    }
  };
  function f() {
    return {
      init: function () {
        let that = this;
        axiosGet("{:url('query')}").then(response => {
          if (response.code == 1) {
            that.tableData = response.data;
            that.menu = JSON.parse(JSON.stringify(response.data));
            that.menu.push({ "name": "---", "id": 0 })
          } else {
            that.$message.error('系统出错了!!!');
          }
        });
      },
      handleEdit(row) {
        this.titleContent = '修改房产'
        this.dialogFormVisible = true;
        this.formData = JSON.parse(JSON.stringify(row));
        if (this.$refs['formData']) {
          this.$refs['formData'].resetFields();
        }
      },
      handleDelete(row) {
        let that = this;
        this.$confirm('是否确认删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          axiosPost("{:url('delete')}", row).then(response => {
            if (response.state == 'success') {
              that.$message.success(response.msg);
              that.dialogFormVisible = false
              that.init();
            } else {
              that.$message({
                message: response.msg, type: response.state
              });
            }
          });
        }).catch(() => { });
      },
      handleAdd() {
        this.titleContent = '新增房产'
        this.dialogFormVisible = true;
        this.formData = {};
        if (this.$refs['formData']) {
          this.$refs['formData'].resetFields();
        }
      },
      handleSave() {
        let that = this;
        let validation = false;
        this.$refs['formData'].validate((valid) => {
          if (valid) {
            validation = true;
          }
        });
        if (validation) {
          axiosPost("{:url('save')}", this.formData).then(response => {
            if (response.state == 'success') {
              that.$message.success(response.msg);
              that.dialogFormVisible = false
              that.init();
            } else {
              that.$message({
                message: response.msg, type: response.state
              });
            }
          });
        }
      }
    }
  }
</script>
{/block}